<template>
    <div class="big-screen" ref="bigScreen">
        <!-- 标题 -->
        <div class="header">
            <h1>能源监控大屏</h1>
            <p>实时更新 · 高效监控水电气消耗</p>
        </div>

        <!-- 全屏按钮 -->
        <button class="fullscreen-btn" @click="toggleFullScreen">全屏</button>

        <!-- 顶部数据卡片 -->
        <div class="top-cards">
            <div v-for="card in cards" :key="card.title" class="card">
                <h2>{{ card.value }}</h2>
                <p>{{ card.title }}</p>
                <div class="shine"></div>
            </div>
        </div>

        <!-- 中部图表 -->
        <div class="charts">
            <div id="chart1" class="chart"></div>
            <div id="chart2" class="chart"></div>
        </div>

        <!-- 底部数据列表 -->
        <div class="bottom-table">
            <h2>实时数据</h2>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>消耗量</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.value }}</td>
                        <td>{{ item.time }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "BigScreen",
    data() {
        return {
            // 顶部卡片的数据：水、电、气等实时监控数据
            cards: [
                { title: "总水消耗", value: "50,000 m³" },
                { title: "总电消耗", value: "150,000 kWh" },
                { title: "总气消耗", value: "12,000 m³" },
                { title: "日均水消耗", value: "1,200 m³" },
            ],
            // 表格数据：实时监控水电气消耗情况
            tableData: [
                { name: "水", value: "500 m³", time: "10:00" },
                { name: "电", value: "1,500 kWh", time: "10:01" },
                { name: "气", value: "120 m³", time: "10:02" },
                { name: "水", value: "480 m³", time: "10:03" },
            ],
        };
    },
    mounted() {
        this.initChart1(); // 初始化第一个图表（折线图）
        this.initChart2(); // 初始化第二个图表（饼图）
        this.adjustLayout(); // 调整页面布局
    },
    methods: {
        // 初始化第一个图表：显示能源消耗趋势（折线图）
        initChart1() {
            const chartDom = document.getElementById("chart1");
            const chart = echarts.init(chartDom);
            const option = {
                title: { text: "能源消耗趋势", textStyle: { color: "#fff" } },
                tooltip: { trigger: "axis" },
                xAxis: {
                    type: "category",
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    axisLine: { lineStyle: { color: "#fff" } },
                },
                yAxis: {
                    type: "value",
                    axisLine: { lineStyle: { color: "#fff" } },
                    splitLine: { lineStyle: { color: "#444" } },
                },
                series: [
                    {
                        name: "水消耗",
                        type: "line",
                        data: [1000, 1200, 1500, 1700, 1600, 1500, 1800], // 水消耗的趋势数据
                        lineStyle: { color: "#00bfff" },
                        itemStyle: { color: "#00ffff" },
                    },
                    {
                        name: "电消耗",
                        type: "line",
                        data: [8000, 10000, 11000, 12000, 13000, 12500, 13000], // 电消耗的趋势数据
                        lineStyle: { color: "#ff6347" },
                        itemStyle: { color: "#ff4500" },
                    },
                    {
                        name: "气消耗",
                        type: "line",
                        data: [500, 600, 700, 800, 900, 850, 950], // 气消耗的趋势数据
                        lineStyle: { color: "#32cd32" },
                        itemStyle: { color: "#228b22" },
                    },
                ],
            };
            chart.setOption(option);
        },
        // 初始化第二个图表：显示能源分布（饼图）
        initChart2() {
            const chartDom = document.getElementById("chart2");
            const chart = echarts.init(chartDom);
            const option = {
                title: { text: "能源消耗分类", textStyle: { color: "#fff" } },
                tooltip: { trigger: "item" },
                legend: {
                    bottom: "10%",
                    textStyle: { color: "#fff" },
                },
                series: [
                    {
                        name: "能源类型",
                        type: "pie",
                        radius: "50%",
                        data: [
                            { value: 1048, name: "水" },
                            { value: 735, name: "电" },
                            { value: 580, name: "气" },
                        ], // 各类能源的消耗比例
                    },
                ],
            };
            chart.setOption(option);
        },
        // 调整页面布局，使其适应页面高度
        adjustLayout() {
            const headerHeight = 60; // 设置头部高度
            const screenHeight = window.innerHeight;
            this.$nextTick(() => {
                const bigScreen = this.$refs.bigScreen;
                bigScreen.style.height = `${screenHeight - headerHeight}px`; // 动态调整高度
            });
        },
        // 切换全屏模式
        toggleFullScreen() {
            const elem = this.$refs.bigScreen;
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) {
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
        },
    },
};
</script>

<style scoped>
/* 页面基础样式 */
.big-screen {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    padding: 20px !important;
    margin: -20px;
    box-sizing: border-box;
    height: 100vh; /* 设置为视口高度 */
    overflow:  none; /* 隐藏滚动条 */
    display: flex;
    flex-direction: column;
}

/* 标题样式 */
.header {
    text-align: center;
    margin-bottom: 10px;
}

.header h1 {
    font-size: 36px;
    margin: 0;
}

.header p {
    font-size: 18px;
    color: #00bfff;
}

/* 顶部卡片样式 */
.top-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap; /* 确保卡片在小屏幕下自动换行 */
}

.card {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    padding: 20px;
    width: 22%;
    position: relative;
    overflow: hidden;
    text-align: center;
    flex-shrink: 0; /* 防止卡片缩小 */
}

.card h2 {
    font-size: 28px;
    margin: 0;
    color: #00ffff;
}

.card p {
    font-size: 16px;
    color: #9ca3af;
    margin: 10px 0 0;
}

.card .shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
    animation: shine 5s infinite linear;
}

@keyframes shine {
    0% {
        transform: rotate(45deg) translateX(-100%);
    }

    100% {
        transform: rotate(45deg) translateX(100%);
    }
}

/* 图表样式 */
.charts {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    flex-wrap: wrap; /* 确保图表在小屏幕下自动换行 */
}

.chart {
    width: 48%;
    height: 400px;
}

/* 表格样式 */
.bottom-table {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px; /* 确保表格与其他内容有间隔 */
}

.bottom-table table {
    width: 100%;
    border-collapse: collapse;
}

.bottom-table th,
.bottom-table td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #444;
}

.bottom-table th {
    color: #00ffff;
}

.bottom-table td {
    color: #fff;
}

/* 全屏按钮样式 */
.fullscreen-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #00bfff;
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}
</style>
